<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="文件名称" prop="fileName">
                <el-input v-model.trim="queryParams.fileName" placeholder="请输入文件名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="文件后缀" prop="suffix">
                <el-input v-model.trim="queryParams.suffix" placeholder="请输入文件后缀" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="文件上传时间">
                <el-date-picker clearable v-model="queryParams.requestDate" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择需求日期">
                </el-date-picker>
                <el-col :span="11">
                    <el-time-picker  placeholder="起始时间" v-model="queryParams.startTime" style="width: 100%;"></el-time-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-time-picker placeholder="结束时间" v-model="queryParams.endTime" style="width: 100%;"></el-time-picker>
                </el-col>
            </el-form-item> -->
            <el-form-item label="添加人" prop="addUser">
                <el-input v-model.trim="queryParams.addUser" placeholder="请输入添加人" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="success" size="mini" @click="upload" v-hasPermi="['system:file:upload']">文件上传+</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" :disabled="multiple" size="mini" @click="removeMany"
                    v-hasPermi="['system:file:remove']">删除</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getFileList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="sysFilesList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="文件原名称" align="left" prop="originName" />
            <el-table-column label="文件后缀" align="left" prop="suffix" />
            <el-table-column label="文件大小(KB)" align="left" prop="sizeKb" />
            <el-table-column label="上传类型" align="center" prop="typeTxt" />
            <el-table-column label="文件名称" :show-overflow-tooltip="true" align="center" prop="physicsName" />
            <el-table-column label="预览" :show-overflow-tooltip="true" width="200px" align="center" prop="path">
                <template slot-scope="scope">
                    <a class="link-type" @click="toViews(scope.row)">{{ scope.row.path }}</a>
                </template>
            </el-table-column>
            <el-table-column label="添加人" align="center" prop="addUser" />
            <el-table-column label="添加时间" align="center" prop="createTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="scope">
                    <!-- v-hasPermi="['system:proofing:remove']" -->
                    <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button> -->
                    <el-button type="success" @click="downLoadFileById(scope.row)" icon="el-icon-download"
                        circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="handleRemove(scope.row)" circle></el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getFileList" />

        <FileForm @updateList="getFileList" ref="fileForm"></FileForm>
    </div>
</template>

<script>
import { getSysFileList, delFile, download, batchDelete } from '@/api/business/file'
import { downloadFileId } from '@/utils/DownloadUtils'
import router from '@/router'
import FileForm from "@/components/business/files/fileForm.vue"
export default {
    name: 'File',
    components: { FileForm, router },
    data() {
        return {
            //选择的数据id数组
            ids: [],
            multiple: true,
            //loading
            loading: false,
            //系统文件数据
            sysFilesList: [],
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                fileName: null,
                addUser: null,
                suffix: null,
            },
        }
    },
    created() {
        this.getFileList()
    },
    methods: {
        toViews(row) {
            // let param = {}
            // param.url = row.path
            // param.id = row.id
            this.$nextTick(() => {
                this.$router.push({
                    name: "Preview",
                    query: { "url": row.path, "id": row.id }
                })
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getFileList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.selectMtList = selection
            this.ids = selection.map(item => item.id)
            this.multiple = !this.ids.length > 0
        },
        getFileList() {
            getSysFileList(this.queryParams).then(result => {
                this.sysFilesList = result.rows
                this.total = result.total;
                this.loading = false;
            })
        },
        handleRemove(row) {
            this.$modal.confirm('确认删除对应的文件吗？').then(function () {
                return delFile(row.id);
            }).then(() => {
                this.getFileList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        upload() {
            this.$refs.fileForm.breakOut(true)//打开文件上传窗口
        },
        //下载文件的方法
        downLoadFileById(row) {
            downloadFileId(row.id,row.originName)
            // download(row.id).then(res => {
            //     // console.log(res)
            //     if (res.size > 0) {
            //         var suf = row.suffix.toLowerCase()
            //         let contextType = {}
            //         //设置文件下载的类型
            //         if (suf == ".pdf") {
            //             contextType.type = "application/pdf"
            //         } else if (suf == ".xls") {
            //             contextType.type = "application/vnd.ms-excel"
            //         } else if (suf == ".xlsx") {
            //             contextType.type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            //         } else if (suf == ".doc") {
            //             contextType.type = "application/msword"
            //         } else if (suf == ".docx") {
            //             contextType.type = "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
            //         } else if (suf == ".png") {
            //             contextType.type = "image/png"
            //         } else if (suf == ".jpeg") {
            //             contextType.type = "image/jpeg"
            //         }else if(suf == ".zip"){
            //             contextType.type = "application/x-zip-compressed"
            //         }else{
            //             contextType.type ="application/octet-stream"
            //         }
            //         const blob = new Blob([res], contextType);
            //         const fileName = row.physicsName
            //         if ('download' in document.createElement("a")) {
            //             const link = document.createElement("a");
            //             link.download = fileName;
            //             link.style.display = 'none';
            //             link.href = URL.createObjectURL(blob);
            //             document.body.appendChild(link);
            //             link.click();
            //             URL.revokeObjectURL(link.href);
            //             document.body.removeChild(link);
            //         } else {
            //             navigator.msSaveBlob(blob, fileName);
            //         }
            //     } else {
            //         this.$message.error("找不到对应的文件！")
            //     }
            // })
        },
        //批量删除文件
        removeMany() {
            if (Array.from(this.ids).length < 1) {
                this.$message.error("请选择要删除的数据！")
            }
            batchDelete(this.ids).then(result => {
                this.$modal.msgSuccess(result.msg);
                this.getFileList()
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>
